import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input } from "antd";
import { useRouter } from "next/router";
import { useMemo } from "react";

interface IProps {
  isLogin?: boolean;
}

export default function UserLogin(props: IProps) {
  const { isLogin } = props;
  const router = useRouter();
  const title = useMemo(() => {
    return isLogin ? "登录" : "注册";
  }, [isLogin]);

  const subTitle = useMemo(() => {
    return isLogin ? "注册" : "登录";
  }, [isLogin]);

  const onFinish = (values: any) => {
    router.push("/");
    console.log("Received values of form: ", values);
  };

  return (
    <div
      className="full-w-h"
      id={"components-form-demo-normal-login"}
      style={{
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <h2>{title}</h2>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        style={{ width: "300px" }}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请输入用户名!" }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住我</Checkbox>
          </Form.Item>

          <a className="login-form-forgot" href="">
            忘记密码
          </a>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
            Log in
          </Button>
          或者 <a href="">{subTitle}!</a>
        </Form.Item>
      </Form>
      <style jsx>
        {`
          #components-form-demo-normal-login .login-form {
            max-width: 300px;
          }
          #components-form-demo-normal-login .login-form-forgot {
            float: right;
          }
          #components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
            float: left;
          }
          #components-form-demo-normal-login .login-form-button {
            width: 100%;
          }
        `}
      </style>
    </div>
  );
}
